<template>
  <div ref="chart" class="chart"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'LineChart2',
  mounted () {
    this.initChart()
    window.addEventListener('resize', this.resizeChart)
  },
  beforeUnmount () {
    window.removeEventListener('resize', this.resizeChart)
  },
  methods: {
    initChart () {
      const chartDom = this.$refs.chart
      const myChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          top: '0%',
          textStyle: {
            color: '#000',
            fontSize: 12
          }
        },
        grid: {
          left: '10',
          top: '30',
          right: '10',
          bottom: '10',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            /*           data: ['01周', '02周', '03周', '04周', '05周', '06周', '07周', '08周', '09周', '10周'], */
            data: ['11-29', '12-06', '12-13', '12-20', '12-27'],
            axisLabel: {
              textStyle: {
                color: '#000',
                fontSize: 12
              }
            },
            axisLine: {
              lineStyle: {
                color: '#ccc'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: { show: false },
            axisLine: {
              lineStyle: {
                color: '#ccc'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#000',
                fontSize: 12
              }
            },
            splitLine: {
              lineStyle: {
                color: '#eee'
              }
            }
          }
        ],
        series: [
          {
            name: '龙井茶',
            type: 'line',
            smooth: true,
            lineStyle: {
              color: '#fac858',
              width: 2,
              type: 'solid'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgba(250, 200, 88, 0.4)'
                  },
                  {
                    offset: 0.8,
                    color: 'rgba(250, 200, 88, 0.1)'
                  }
                ],
                false
              ),
              shadowColor: 'rgba(0, 0, 0, 0.1)'
            },
            emphasis: {
              focus: 'series'
            },
            symbol: 'circle',
            symbolSize: 8,
            showSymbol: false,
            itemStyle: {
              color: '#fac858',
              borderColor: 'rgba(221, 220, 107, .1)',
              borderWidth: 12
            },
            /* data: [10, 25, 40, 60, 80, 105, 130, 155, 180, 205] */
            data: [0.1, 0.4, 0.8, 1.3, 1.8]
          },
          {
            name: '黄金芽',
            type: 'line',
            smooth: true,
            lineStyle: {
              color: '#0184d5',
              width: 2,
              type: 'solid'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgba(1, 132, 213, 0.4)'
                  },
                  {
                    offset: 0.8,
                    color: 'rgba(1, 132, 213, 0.1)'
                  }
                ],
                false
              ),
              shadowColor: 'rgba(0, 0, 0, 0.1)'
            },
            emphasis: {
              focus: 'series'
            },
            symbol: 'circle',
            symbolSize: 8,
            showSymbol: false,
            itemStyle: {
              color: '#0184d5',
              borderColor: 'rgba(221, 220, 107, .1)',
              borderWidth: 12
            },
            /*  data: [8, 22, 38, 55, 72, 90, 110, 135, 160, 185] */
            data: [0.08, 0.38, 0.72, 1.1, 1.6]
          },
          {
            name: '土茶',
            type: 'line',
            smooth: true,
            lineStyle: {
              color: '#00d887',
              width: 2
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgba(0, 216, 135, 0.4)'
                  },
                  {
                    offset: 0.8,
                    color: 'rgba(0, 216, 135, 0.1)'
                  }
                ],
                false
              ),
              shadowColor: 'rgba(0, 0, 0, 0.1)'
            },
            symbol: 'circle',
            symbolSize: 5,
            itemStyle: {
              color: '#00d887',
              borderColor: 'rgba(221, 220, 107, .1)',
              borderWidth: 12
            },
            showSymbol: false,
            emphasis: {
              focus: 'series'
            },
            /*  data: [11, 26, 42, 62, 82, 102, 125, 150, 175, 200] */
            data: [0.11, 0.42, 0.82, 1.25, 1.75]
          }
        ]
      }

      myChart.setOption(option)
      this.chart = myChart
    },
    resizeChart () {
      this.chart.resize()
    }
  }
}
</script>

<style scoped>
.chart {
  width: 100%;
  height: 400px;
}
</style>
